import React, { Component } from 'react';
import { Row, Col, Tooltip } from 'antd';
import _ from 'lodash';
import countryCodeMap from '@util/countryCodeMap';
import PropTypes from 'prop-types';
import './index.less';
import '@containers/asset-manage/components/asset-content/flag.css';

const prefixCls = 'base-info-card';
const ROW_NUM = 4;
const BASE_INFO_MAP = [
  {
    key: 'target',
    name: '网站'
  },
  {
    key: 'ip',
    name: 'ip地址'
  },
  {
    key: 'geoInfo.city.nameCN',
    otherKey: 'geoInfo.city.name',
    name: '城市'
  },
  {
    key: 'geoInfo.province.nameCN',
    otherKey: 'geoInfo.province.name',
    name: '省/州'
  },
  {
    key: 'geoInfo.country.nameCN',
    otherKey: 'geoInfo.country.name',
    name: '国家'
  },
  {
    key: 'location',
    name: '坐标'
  },
  {
    key: 'geoInfo.organization.nameCN',
    otherKey: 'geoInfo.organization.name',
    name: '组织'
  },
  {
    key: 'geoInfo.isp',
    name: '网络服务提供商'
  },
  {
    key: 'geoInfo.asn',
    name: '自治系统编号'
  }
];

class BaseInfoCard extends Component {
  constructor(props) {
    super(props);
  }

  renderBaseInfo = () => {
    const { data, isHost } = this.props;
    let baseMap = [...BASE_INFO_MAP];
    if (isHost) {
      baseMap.shift();
    }

    const newArray = _.chunk(baseMap, ROW_NUM);
    return newArray.map((item, index) => {
      return (
        <div key={index} className={`${prefixCls}-right-bottom`}>
          <div className={`${prefixCls}-right-bottom-name`}>
            {item.map(i => {
              const name = _.get(i, 'name', '');
              return (
                <>
                  <span>{name}</span>
                  <br />
                </>
              );
            })}
          </div>
          <div className={`${prefixCls}-right-bottom-value`}>
            {item.map(i => {
              const title = _.get(i, 'name');
              let value = _.get(data, i.key);
              if (_.isEmpty(value) && _.has(i, 'otherKey')) {
                value = _.get(data, i.otherKey);
              }
              if (value && Array.isArray(value)) {
                value = value.toString();
              }
              if (title === '国家') {
                let countryMapElement =
                  value && countryCodeMap[value] ? (
                    <i className={`flag flag-${countryCodeMap[value]}`} />
                  ) : null;
                return (
                  <>
                    <span>
                      {countryMapElement}&nbsp;&nbsp;{value || '-'}
                    </span>
                    <br />
                  </>
                );
              }

              if (title === '坐标') {
                return (
                  <>
                    <span>
                      {_.get(data, 'geoInfo.latitude', '-') || '-'}，
                      {_.get(data, 'geoInfo.longitude', '-') || '-'}
                    </span>
                    <br />
                  </>
                );
              }

              if (value && value.length > 32) {
                const title = value;
                value = value.substring(0, 33);
                return (
                  <Tooltip title={title}>
                    <span>{value}</span>
                    <br />
                  </Tooltip>
                );
              }
              return (
                <>
                  <span>{value || '-'}</span>
                  <br />
                </>
              );
            })}
          </div>
        </div>
      );
    });
  };

  render() {
    const { isExistAssetList, onChange } = this.props;
    return (
      <div className={`${prefixCls}`}>
        <Row style={{ marginBottom: '10px' }}>
          <Col span={2} className={`${prefixCls}-title`}>
            基本信息
          </Col>
          <Col span={21}>
            <a onClick={onChange}>
              {isExistAssetList ? '更新' : '添加'}
              到资产列表
            </a>
          </Col>
        </Row>
        <Row>
          <div className={`${prefixCls}-right`}>{this.renderBaseInfo()}</div>
        </Row>
      </div>
    );
  }
}

BaseInfoCard.propTypes = {
  data: PropTypes.object,
  isExistAssetList: PropTypes.bool,
  onChange: PropTypes.func,
  isHost: PropTypes.bool
};

export default BaseInfoCard;
